<template>
  <div>
    <van-nav-bar
      title="购物车"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #right>
        <div class="empty" @click="empty">清空</div>
      </template>
    </van-nav-bar>


    <div v-if="lists.length>0">
    <van-swipe-cell v-for="(item, index) in lists" :key="item.cartid">
      <van-row class="goods-card">
        <van-col span="2" class="leftbox cancol">
          <van-checkbox
            v-model="item.flag"
            @click="select(item.cartid, item.flag)"
          ></van-checkbox>
        </van-col>
        <!-- van-row表示的是一行   van-col表示的是一行两个，span表示的是份数 -->
        <van-col span="22">
          <van-card
            :price="item.originprice"
            :desc="item.proname"
            :thumb="item.img1"
          >
            <template #footer>
              <!-- <van-button size="mini" @click="minusnum(item)">-</van-button>
                <van-button size="mini" @click="addnum(item)">+</van-button> -->
              <van-stepper
                v-model="item.num"
                input-width="40px"
                button-size="24px"
                theme="round"
                @change="onChange(item)"
              >
              </van-stepper>
            </template>
          </van-card>
        </van-col>
      </van-row>
      <template #right>
        <van-button
          square
          text="删除"
          type="danger"
          class="delete-button"
          @click="deletee(item.cartid)"
        />
      </template>
    </van-swipe-cell>
    <!-- </van-checkbox-group> -->
    <!-- 底部区域 -->
    <!-- <div style="width: 100%; height: 50px"></div> -->
    <!-- 底部 -->
  </div>
  <van-grid
      :column-num="1"
      style="width: 100%; height: 200px"
      v-else
    >
      <van-grid-item icon="cart-o" text="购物车啥也没有" />
    </van-grid>
    <van-submit-bar
      :price="allprice"
      button-text="提交订单"
      @submit="onSubmit(item)"
    >
      <van-checkbox v-model="selAll">全选</van-checkbox>
    </van-submit-bar>
    <!-- 全选和提交订单的写法 -->

    <!-- <div style="display: none; width: 0px; height: 0px !important"></div> -->
    <!-- <div>{{totalnum  }}</div> -->
  </div>
</template>
<script setup>
import {
  carlist,
  joinshopcar,
  updatenum,
  selectone,
  remove,
  removeall,
  selectall
} from "../services";
import { useStores } from "../stores/stores";
import { showConfirmDialog } from "vant";
import { ref, computed, onMounted } from "vue";

let mainStores = useStores();
let lists = ref([]);
const onClickLeft = function () {
  history.back();
};
// 异步处理数据
onMounted(async () => {
  let res = await carlist({ userid: localStorage.getItem("userid") });
  lists.value = res.data.data;
  // listsnum.value=res.data.data.num
  // console.log(lists[0].proname);
  console.log(999999, lists.value, 99999999999);
});
//更新购物车的数据
let onChange = async function (item) {
  let a = await updatenum({
    cartid: item.cartid,
    num: item.num,
  });
  console.log(a);
};

// 更新重选的状态
let select = async function (cartid, flag) {
  let req = await selectone({ cartid, flag });
  console.log(req);
};
// 更新重新选中状态的函数成功
// 提交按钮
let onSubmit = function () {};
// 全选的实现
let selAll = computed({
  get() {
    return lists.value.every((item) => item.flag === true);
  },
  set(val) {
    // 当get里边的值为真的时候。就这样写
    if (val === true) {
      selectall({ userid: localStorage.getItem("userid"), type: true }).then((res) => {
        console.log(res,"标记一下");

      })
      lists.value.forEach((item) => (item.flag = true));
      // 这里需要再次调用一次ajax请求
      console.log(lists.value, '我来做个标记');
      // 更新购物车中的选项的状态
      // selectall({ userid: localStorage.getItem("userid"), type: true }).then((res) => {
      //   console.log(res);

      // })
    } else {
      selectall({ userid: localStorage.getItem("userid"), type: false }).then((res) => {
        console.log(res,"标记一下");

      })
      lists.value.forEach((item) => (item.flag = false));
    }
  },
});

// 计算总价
const allprice = computed(() => {
  let total = 0;
  lists.value.forEach((item) => {
    if (item.flag) {
      total += item.originprice * item.num * 100;
    }
  });
  return total;
});

// 商品删除的实现
// 商品删除的实现
const deletee = function (cartid) {
  console.log(cartid, "删除商品的实现1111");
  // console.log(item, "商品删除的实现");
  showConfirmDialog({
    title: "确认删除",
  })
    .then(async () => {
      console.log("remove ", cartid);
      await remove({ cartid });
      // 然后再重新获取购物车的数据
      console.log(999);
      let res1 = await carlist({
        userid: localStorage.getItem("userid"),
      });
      lists.value = res1.data.data;
    })
    .catch((e) => {
      console.log("");
    });
};

// 清空购物车的实现
const empty = function () {
  console.log(999);
  showConfirmDialog({
    title: "确认清空购物车",
  })
    .then(async () => {
      await removeall({
        userid: localStorage.getItem("userid"),
      });
      let res1 = await carlist({
        userid: localStorage.getItem("userid"),
      });
      lists.value = res1.data.data;
    })
    .catch(() => {
      // on cancel
    });
};
// 清空购物车功能实现结束
</script>
<style scoped>
.cancol {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f7f8fa;
}
.goods-card {
  margin: 0;
  background-color: white;
}
.delete-button {
  height: 100%;
}
.empty {
  font-size: 13px;
  font-weight: 800;
}
</style>
